iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

大家好!

要寫到今天也真是不容易呢!明天就要從 50% 開始了!
我們進入今天的主題吧!


嚴謹模式

當我們直接呼叫 this 時,this 會指向 window

this; // window

但是,當 this 是在函式內被呼叫的話,會有這樣的情況:

(function () {
    return this; // window
})();

(function () {
    'use strict';
    return this; // undefined
})();

沒錯,不能小看 'use strict' 這組字串,這是 ES5 加入的「嚴謹模式」。
嚴謹模式下,函式內的語法都會被嚴謹地檢查,一旦不合常理就會回傳錯誤。
例如,對被凍結的物件新增屬性,一般模式下只會默不作聲,嚴謹模式下則會回傳錯誤:

let obj = {};
Object.freeze(obj);

(function () {
    obj.one = 1; // 1
})();

(function () {
    'use strict';
    obj.one = 1; // Uncaught TypeError: Cannot add property one, object is not extensible
})();

嚴謹模式的確能改善編寫程式的錯誤或壞習慣,但是對於不支援 ES5 的瀏覽器來說,'use strict' 就只是一組字串,沒有任何意義,因此建議僅在開發環境下使用嚴謹模式就好。


this

上方我們提到 this 在函式內被呼叫的情況。
但是,當函式作為物件的屬性時,函式內的 this 指向的會是物件:

(這是第一天的小測驗,還記得嗎?)

var obj = {
    kw: this,
    fn: function () {
        return this;
    }
};

obj.kw; // window
obj.fn(); // obj

這也是為什麼,建構函式和原型方法的 this 指向的都是新的物件:

/* 因為 finish 算是 record 的屬性 */
let record = new Ironman('Felix', '2021-09-30', 15);
record.finish(); /* 不執行 */

差不多也到尾聲了,接下來我們要開始打造函式庫了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 14 - 控制物件
下一篇
JS 16 - jQuery 太重了,何不選擇需要的功能就好?
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言